<template>
  <div class="news">
	<div class="news_top">
	  <div class="back"><img @click="back()" src="../assets/images/back.png" alt=""></div>
	  <div>{{title_top}}</div>
	  <div class="save"><img @click="save()" src="../assets/images/save.png" alt=""></div>
	</div>
	<div class="search">
	  <input maxlength="16" type="search" name=""  placeholder="标题" v-model="title">
	</div>
	<textarea name="" @input="keys"  cols="30" rows="10" v-model="content" ></textarea>
	<div class="count">{{word_count}}&nbsp;/&nbsp; {{total_words}}</div>
  </div>
</template>
<script>
	// focus,blur
	import { setStorage, getStorage } from "utils_c";
	export default {
	    data() {
	  	    return {
	  	        title_top: "", //顶栏标题字
	  	        title: "", //标签标题
	  	        content: "", //标签内容
	  	        Data: [], //存储的数据
	  	        confirmContent: "是否保存,确认?",
	  	        total_words: 500,
	  	        word_count: 0
	  	    };
	    },
        beforeRouteEnter (to, from, next) {
            next(vm => {
                if(!vm.$route.params['state']){
                    vm.$router.go(-1);
				}
            })
        },
		created() {
	 	    if (this.$route.params['state'] == "1") {//预览
                 this.title_top = "预览";
                 this.content = this.$route.params['content'];
                 this.title = this.$route.params['title'];
	 	    } else {//打开新标签
                 this.title_top = "新标签";
	 	    }
	 	  mui.back = function() {};
	   },
	    methods: {
	  		keys() {
	  		    if (this.content.length > this.total_words) {
	  		  		this.content = this.content.substring(0, this.total_words);
	  		  		this.word_count = this.total_words - this.content;
	  		    }
	  		},
	  		back() {
	  		    if (this.title === this.$route.params['title'] &&this.content === this.$route.params['content']) { //未作修改
	  		  	    this.$router.go(-1);
	  		    } else {//已修改
	  		  	    this.save();
	  		    }
	  		},
	  		save() {
	  		    var btnArray = ["取消", "放弃", "保存"];
	  		    mui.confirm(this.confirmContent, "简易备忘录", btnArray, (e)=> {
	  		  	    if (e.index === 0) {//取消
	  		  	    } else if (e.index === 1) {//放弃
						this.$router.go(-1);
	  		  	    } else {//保存
	  					this.Data = getStorage("msg") ? getStorage("msg") : [];
	  		  	        if (this.$route.params['state'] === "1") {
							this.Data = this.Data.map((value)=> {
							    if (value.time === this.$route.params['time']) {
							  	    return {
							  	  	    title: this.title ? this.title : "未命名",
							  	  	    content: this.content,
							  	  	    time: new Date().toLocaleString()
							  	    }
							    } else {
							  	    return value;
							    }
	  		  	    		});
	  		  	        } else {//新标签
							this.Data.push({
	  		  	    		    title: this.title ? this.title : "未命名",
	  		  	    		    content: this.content,
	  		  	    		    time: new Date().toLocaleString()
	  		  	    		});
	  		  	        }
	  		  	    	setStorage("msg", this.Data);
        	            this.msg = "";
        	            this.title = "";
        	            this.$router.push("/HomeView");
	  		  	    }
	  		    });
	  		}
	    }
	};
</script>
<style scoped>
	::-webkit-scrollbar {
	    display: none !important;
	}
	.count {
	    position: absolute;
	    bottom: 0;
	    left: 0;
	    right: 0;
	    padding: 8px 30px;
	    text-align: right;
	    /*background-color:red;*/
	}
	.news_top {
	    display: flex;
	    justify-content: space-between;
	    color: #333;
	    padding: 8px 12px;
	    background-color: rgba(0, 0, 0, 0.15);
	    display: flex;
	    align-items: center;
	}
	.news_top img {
	    width: 20px;
	    height: 20px;
	}
	textarea {
	    width: calc(100% - 36px);
	    position: absolute;
	    left: 18px;
	    right: 18px;
	    bottom: 36px;
	    top: 100px;
	    font-size: 16px;
	    line-height: 2;
	    font-family: "微软雅黑", "宋体";
	}

	.search {
	    display: flex;
	    position: relative;
	    /* padding-bottom: 15px; */
	}
	.search input {
	  /* border: none; */
	    width: 100%;
	    padding: 18px 5px;
	    margin: 0 18px;
	    font-size: 18px;
	    border-bottom: 1px solid rgb(179, 170, 170);
	    box-sizing: content-box;
	    height: auto;
	    text-align: left;
	    border-radius: 0;
	    background-color: transparent;
	}

	/* 修改input的颜色 */
	:-moz-placeholder {
	    /* Mozilla Firefox 4 to 18 */
	    color: #ccc9c9;
	    opacity: 1;
	    font-size: 18px;
	}

	::-moz-placeholder {
	  /* Mozilla Firefox 19+ */
	    color: #ccc9c9;
	    opacity: 1;
	    font-size: 18px;
	}

	input:-ms-input-placeholder {
	    color: #ccc9c9;
	    opacity: 1;
	    font-size: 18px;
	}

	input::-webkit-input-placeholder {
	    color: #ccc9c9;
	    opacity: 1;
	    font-size: 18px;
	    font-weight: 900;
	}
</style>


